<template >
    <div >
        <div class="header">
            <div class="header_box">
                <div class="img"><img src="@/assets/img.png" alt=""></div>
                <div class="login">
                    <span id="login" @click="changeLogin">立即登录</span>

                </div>

            </div>
        </div>
        <ul class="tip">
            <li class="left">
                <div class="vlue">0张</div>
                <div class="lable">卖座票</div>
            </li>
            <li class="right">
                <div class="vule"> ￥0</div>
                <div class="lable">余额</div>
            </li>
        </ul>
        <ul class="list">
            <li> <van-icon name="coupon-o" id="icon" color="#ffc82f"/><span id="option">电影订票</span> <span id="left" style="padding-left: 11.5rem;" @click="changeLogin"><van-icon name="arrow" /></span></li>
            <li><van-icon name="balance-pay" id="icon" color="#baa27a"/><span id="option">组合红包</span><span id="left" style="padding-left: 11.8rem;" @click="changeLogin"><van-icon name="arrow" /></span></li>
            <li><van-icon name="service-o"  id="icon" color="#5a8fb6"/><span id="option">帮助与客服</span> <span id="left" style="padding-left: 10.5rem;" @click="changeLogin"><van-icon name="arrow"/></span></li>
            <li><van-icon name="setting-o" id="icon" color="#c4d46e"/><span id="option">设置</span> <span id="left" style="padding-left: 13.5rem;" @click="changeLogin"><van-icon name="arrow" /></span></li>
        </ul>
    </div>
</template>
<script>
export default {
  methods: {
    changeLogin () {
      this.$router.push('./Login')
      console.log('ss')
    },
    changeRegister () {
      this.$router.push('./Login')
    }
  }
}
</script>
<style lang="scss" scoped>
.header{
    .iconfont{
        font-size: 25px;
    }
    height: 9.375rem;
    width: 100%;
    background-color: #ff7426;
    .header_box{
        width: 6.75rem;
        margin: 0 auto;
        position: absolute;
        justify-content: space-between;
        display: flex;
        top: 50%;
        left: 50%;
        margin-left: -20%;
        margin-top: -67%;
        #login{

            left: 10px;
        }
    }
 }
 .img{
    border-radius: 50%;
    width: 5rem;
    height: 5rem;

    margin-left: -5.375rem;
    margin-top: -2.75rem;
    img{
        overflow: hidden;
        background-position: center;
        border-radius: 50%;
        background-size: cover;
    }
 }
 .tip{
    display: flex;
    text-align: center;
    height: 4.9375rem;
    margin-top: .625rem;
    .left{
        flex: 1;
        margin-top: .625rem;
    }
    .right{
        flex: 1;
        margin-top: .625rem;
    }
    .vlue{
        color: #191a1b;
        font-size: 17px;
    }
    .lable{
        color: #797d82;
        font-size: 13px;
    }
 }
 .list{
    margin-top: 1.5625rem;
    // margin-left: .625rem;
    width: 100%;
    #option{

        margin-left: 10px;
    }
    li{
        height: 3.0625rem;
        line-height: 3.0625rem;
        margin-left: .625rem;
        #left{
            font-size: 10px;
            color: gainsboro;
        }
    }
    #icon{
        font-size: 25px;
    }
 }
 .login{
    margin-top: -.625rem;
    color: white;
    margin-left: .625rem;
    width: 6.25rem;
 }

</style>
